<script lang="ts" setup>
import { ref, reactive, defineAsyncComponent, watchEffect, onMounted } from 'vue'
import PhoneForm from '@/components/form/PhoneForm.vue'
import { queryShortTermChargeRefund } from '@/api/expense'
import {
  queryShortTermChargeRefundTabelCol,
  queryShortTermChargeRefundRequestData
} from '@/api/expense/types/expense'
import { useTable } from '@/hooks/useTable'
import { getToken } from '@/utils/cache/cookies'
import { OperationType, ShortTermAdjustType } from '@/types/enum'
import { useRoute } from 'vue-router'
defineOptions({
  name: 'RideCost'
})
const route = useRoute()
const form = reactive<queryShortTermChargeRefundRequestData>({
  phone: '',
  orderId: route.query.orderId as string,
  type: '',
  operationType: ''
})

const operationType = ref<string>('')

const operationTypeOptions = [
  {
    label: '不限',
    value: ''
  },
  {
    label: '退费(骑行费)',
    value: '1+0'
  },
  {
    label: '退费(强制还车费)',
    value: '1+1'
  },
  {
    label: '退费(维修费)',
    value: '1+2'
  },
  {
    label: '退费(拖车费)',
    value: '1+3'
  },
  {
    label: '退费(违规费)',
    value: '1+4'
  },
  {
    label: '收费(骑行费)',
    value: '0+0'
  },
  {
    label: '收费(维修费)',
    value: '0+2'
  },
  {
    label: '收费(拖车费)',
    value: '0+3'
  },
  {
    label: '收费(违规费)',
    value: '0+4'
  }
]
watchEffect(() => {
  if (operationType.value === '') {
    form.type = ''
    form.operationType = ''
  } else {
    form.type = +operationType.value.split('+')[0] as OperationType
    form.operationType = +operationType.value.split('+')[1] as ShortTermAdjustType
  }
})
const { pagination, handleSizeChange, handleCurrentChange, data, loading, setCurrentPage, load } =
  useTable<queryShortTermChargeRefundTabelCol>(
    queryShortTermChargeRefund,
    getToken() ?? '',
    () => form
  )
const handleFormSearch = () => {
  setCurrentPage(1)

  load()
}
const handleReset = () => {
  operationType.value = ''
}
/** 新增收退费 */
const ShortBikeFeeChargedDialog = defineAsyncComponent(
  () => import('@/components/dialog/ShortBikeFeeCharged.vue')
)
const ShortBikeFeeChargedDialogRef = ref<InstanceType<typeof ShortBikeFeeChargedDialog> | null>(
  null
)
const AddCharged = () => {
  ShortBikeFeeChargedDialogRef.value?.open()
}

onMounted(() => {
  console.log(route)

  load()
})
</script>

<template>
  <div class="xy-container">
    <!-- <div mb-20>
      <el-button type="primary" @click="AddCharged">新增收/退费</el-button>
    </div> -->
    <phone-form v-model="form" @search="handleFormSearch" @other-reset="handleReset">
      <template #other>
        <el-form-item prop="orderId" label="行程编号">
          <el-input v-model="form.orderId" placeholder="请输入行程编号" />
        </el-form-item>
      </template>
      <template #select>
        <el-form-item label="调整类型">
          <el-select v-model="operationType" style="width: 150px">
            <el-option
              :label="option.label"
              :value="option.value"
              v-for="(option, index) in operationTypeOptions"
              :key="index"
            />
          </el-select>
        </el-form-item>
      </template>
    </phone-form>
    <el-table :data="data" v-loading="loading" class="no-border">
      <el-table-column prop="phone" label="用户手机号" min-width="150" align="center" />
      <el-table-column prop="orderId" label="行程编号" min-width="200" align="center" />
      <el-table-column prop="rideAmount" label="骑行费用" min-width="100" align="center" />
      <el-table-column prop="forceReturnAmount" label="强制还车费" min-width="110" align="center" />
      <el-table-column prop="deductionType" label="抵扣方式" min-width="100" align="center" />
      <el-table-column prop="payStatus" label="支付状态" min-width="100" align="center" />
      <el-table-column prop="operationType" label="调整类型" min-width="150" align="center" />
      <el-table-column prop="amount" label="金额" min-width="100" align="center" />
      <el-table-column
        prop="discountCoupon"
        label="骑行费优惠/抵扣券"
        min-width="150"
        align="center"
      />
      <el-table-column
        prop="reason"
        label="原因"
        min-width="120"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column prop="changeTime" label="调整时间" min-width="200" align="center" />
      <el-table-column
        prop="operator"
        fixed="right"
        label="操作人"
        min-width="200"
        align="center"
      />
    </el-table>
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
    <short-bike-fee-charged-dialog ref="ShortBikeFeeChargedDialogRef" @refresh="load" />
  </div>
</template>

<style scoped></style>
